<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="SUP">
                <span class="seachCSC">
                    {{$t('transstatus')}}
                    <el-select v-model="paystackform.tradeResult" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('succ')" value="success"></el-option>
                        <el-option :label="$t('reversed')" value="reversed"></el-option>
                    </el-select>
                </span>
                <span class="seachStatus">
                    {{$t('resconiliationdate')}}
                    <el-date-picker :placeholder="$t('plsset')" v-model="billingDate" width="20%" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                </span>
                <span class="seachStatus">
                    {{$t('platformserialnum')}}
                    <el-input v-model.trim="paystackform.platFlowNo" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seachBillPayStack" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="cpequtab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="platFlowno" :label="$t('platformserialnum')">
                </el-table-column>
                <el-table-column prop="tradeAmount" :label="$t('trastamt')">
                </el-table-column>
                <el-table-column prop="payFee" :label="$t('servchrg')">
                </el-table-column>
                <el-table-column prop="currency" :label="$t('currencytype')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('transstatus')">
                </el-table-column>
                <el-table-column prop="gatewayResponse" :label="$t('gateway')">
                </el-table-column>
                <el-table-column prop="billingDate" :label="$t('resconiliationdate')">
                </el-table-column>
                <el-table-column prop="tradeTime" :label="$t('transactiontime')">
                </el-table-column>
                <!-- <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detailsmRec(scope.row.transId)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paystackform.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="paystackform.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getrcoutbillpaystacklist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
export default {
    data () {
        return {
            total: 0,
            paystackform: {
                billingDate: null,
                tradeTyp: -1,
                tradeResult: null,
                platFlowNo: null,
                pageSize: 10,
                pageNum: 1
            },
            cpequtab: [],
            billingDate: null
        }
    },
    methods: {
        seachBillPayStack () {
            if (this.billingDate !== null) {
                this.paystackform.billingDate = this.billingDate.substring(0, 10).split('-').join('')
            }
            if (this.billingDate === null) {
                this.billingDate = null
                this.paystackform.billingDate = null
            }
            this.getBillPayStackList()
        },
        getBillPayStackList () {
            getrcoutbillpaystacklist(this.paystackform).then(res => {
                if (res.data.code === '000000') {
                    for (let i = 0; i <= res.data.data.list.length - 1; i++) {
                        let item = res.data.data.list[i]
                        item.billingDate = item.billingDate.slice(0, 4) + '-' + item.billingDate.slice(4, 6) + '-' + item.billingDate.slice(6, 8)
                        if (item.status === 'success') item.status = this.$t('succ')
                        if (item.status === 'reversed') item.status = this.$t('reversed')
                        if (item.gatewayResponse === 'Approved') item.gatewayResponse = this.$t('approved')
                        if (item.gatewayResponse === 'Successful') item.gatewayResponse = this.$t('succ')
                        if (item.gatewayResponse === '[Test] Approved') item.gatewayResponse = this.$t('testapproved')
                    }
                    this.cpequtab = res.data.data.list
                    this.total = res.data.data.total - 0
                } else {
                    this.$message.error(this.$t('sysexception'))
                }
            })
        },
        handleSizeChange (newSize) {
            this.paystackform.pageSize = newSize
            this.getBillPayStackList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.paystackform.pageNum = newNum
            this.getBillPayStackList()
        }
    },
    mounted () {
        this.billingDate = getInitDate(0, 1)
        this.paystackform.billingDate = getInitDate(0, 1).split('-').join('')
        this.getBillPayStackList()
    }
}
</script>

<style lang="less" scoped>
@import './staQuery.less';
</style>
